vue3实际开发中遇到的问题:setup遇到异步请求逻辑时结合async使用方法 | 您所在的位置:网站首页 › vue3接口慢 渲染中断 › vue3实际开发中遇到的问题:setup遇到异步请求逻辑时结合async使用方法 |
setup执行在 VUE实例的beforeCreate()与created()之前 函数抛出的逻辑内容包括数据和方法都已完成 setup引入的JS逻辑: export default function useProductSetup() { const getData = (param) => { //省略异步请求代码 return data; }; return { getData } } VUE文件 setup(props, context) { const { getData } = useProductSetup(); return { getData }; }, beforeCreate(){ this.getdata( ); //此时方法已存在 },此时 因为函数getdata存在异步请求(开发中绝大部分接口访问都是异步) mounted() { let res = this.getData({ Param }); res;//此时无法获得该异步请求数据,res为空 },若将JS返回的函数封装为promise对象 在vue实例中利用await即可获得该数据进行操作(async精髓 同步方式写异步) export default function TestSetup() { const getData = (param) => { return new Promise((resolve,reject) => { //省略异步请求代码 resolve(data); }) }; return { getData } } async mounted() { let res = await this.getData(); res;//此时即可获得该异步请求数据 },这里也可以写成回调函数的方式 export default function TestSetup() { const getData = (param,success) => { //省略异步请求代码 success:success }; return { getData } } async mounted() { await this.getData(param,{ this.$toast.success("成功");//等后续处理代码 //但前提是这里的异步执行在ue实例化之后可以获取vue实例 } ); },但这里依然无法解决没有VUE可操作实例的问题,且容易造成回调地狱 |
CopyRight 2018-2019 实验室设备网 版权所有 |